<template>
  <div class="kgh-container">
    <div class="section">
      <div class="container">
        <div class="row">
          <div class="col-xs-12">
            <h2 class="my-title">{{navSelect}}</h2>
          </div>

          <div class="col-md-2 col-xs-12 my-nav">
            <ul class="nav nav-pills nav-stacked">
              <li role="presentation" v-for="item in navList" :key="item.text" :class="{'active':navSelect==item.text}">
                <router-link :to="item.url">{{item.text}}</router-link>
              </li>
            </ul>
          </div>
          <div class="col-md-8 col-md-offset-1 col-xs-12">
            <router-view></router-view>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'my',
  data () {
    return {
      navList: [
        {
          text: '基础资料',
          url: '/my/myInfo'
        },
        {
          text: '订单管理',
          url: '/my/myOrder'
        },
        {
          text: '课程管理',
          url: '/my/myCourse'
        },
        {
          text: '文件管理',
          url: '/my/myFile'
        },
        {
          text: '成为专家',
          url: '/my/myInto'
        },
        {
          text: '我的收藏',
          url: '/my/myCollect'
        },
        {
          text: '新建视频课程',
          url: '/my/myVideo'
        }
      ]
    }
  },
  computed: {
    navSelect () {
      let select = ''
      let url = this.$route.path
      let list = this.navList
      let l = list.length
      for (let i = 0; i < l; i++) {
        if (list[i].url == url) {
          select = list[i].text
          break
        }
      }
      return select
    }
  }
}
</script>
<style lang="scss" scoped>
.my-title {
  margin-bottom: 40px;
}
.my-nav {
  margin-bottom: 20px;
  .nav > li > a {
    padding: 10px 0px;
    font-size: 16px;
  }

  .nav > li > a:hover,
  .nav-pills > li.active > a,
  .nav-pills > li.active > a:focus,
  .nav-pills > li.active > a:hover {
    color: #0092dc;
    background-color: transparent;
  }
}

</style>
